import React, {useState} from "react";
import {random} from 'lodash';
export default function App() {
  //声明一个状态  night
  //night 用来保存状态, setNight 修改状态
  let [night, setNight] = useState(true); // true  状态的初始值
  let [bg, setBg] = useState(`rgb(0,0,0)`); // true  状态的初始值

  //声明一个函数
  let handleClick = () => {
    //更新状态
    setNight(!night)
  }

  //声明函数
  let changeBg = () => {
    setBg(`rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`);
  }

  //返回虚拟 DOM
  return (
    <div>
      <div>至尊宝, 我是 {night ? "青霞" : "紫霞"} 仙子</div>
      <hr />
      <button onClick={handleClick}>切换</button>

      <hr />
      <div onClick={changeBg} style={{width: '300px', height: '200px',background: bg}}></div>
    </div>
  );
}
